<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
    <style>
      button {
        width: 100px;
        background-color: aquamarine;
      }
      #app {
        margin: 400px 500px;
        width: 400px;
      }
      
      span{
          margin-left: 20px;
          font-size: 20px;
      }    
      .aaa{
       
          width: 50px;
          height: 50px;
          border: 1px solid black;
          display: flex;
          align-items: center;
      }
      .bbb{
          display: flex;
          width: 210px;
          flex-wrap: wrap;  
      }
      .v-move{
        transition: all 2s;
      }   
    </style>
  </head>
  <body>
    <div id="app">
        
        <button @click="shuffle">我是打乱</button>

      <transition-group tag='div' class="bbb">
        <div v-for='i in list' :key="i.id"  class="aaa">
           <span>{{i.num}}</span>
        </div>
      </transition-group>
    </div>

    <script>
       

      var app = new Vue({
        el: "#app",
        data: {
         
          list:[{id:1,num:1},{id:2,num:2},{id:3,num:3},{id:4,num:4},{id:5,num:1},{id:6,num:2},
          {id:7,num:3},{id:8,num:4},{id:9,num:3} ,{id:10,num:4},{id:11,num:1},{id:12,num:2},
          {id:13,num:1},{id:14,num:2},{id:15,num:3} ,{id:16,num:4}
        ],
        },
        methods:{ 
            shuffle(){
                this.list=_.shuffle(this.list)
            },
           
        }
      });
    </script>
  </body>
</html>